<template>
    <view class="forget-password">
        <view class="header">
            <text class="back" @tap="goBack">返回</text>
            <text class="title">忘记密码</text>
        </view>
        
        <view class="form">
            <view class="form-item">
                <text class="label">手机号</text>
                <input 
                    type="number"
                    v-model="form.phone"
                    maxlength="11"
                    placeholder="请输入手机号"
                    :placeholder-style="placeholderStyle"
                />
            </view>
            
            <view class="form-item verify">
                <text class="label">验证码</text>
                <input 
                    type="number"
                    v-model="form.verifyCode"
                    maxlength="6"
                    placeholder="请输入验证码"
                    :placeholder-style="placeholderStyle"
                />
                <text 
                    class="verify-btn"
                    :class="{ disabled: counting }"
                    @tap="getVerifyCode"
                >{{ counting ? `${counter}s` : '获取验证码' }}</text>
            </view>
            
            <view class="form-item">
                <text class="label">新密码</text>
                <input 
                    type="password"
                    v-model="form.password"
                    placeholder="请输入新密码"
                    :placeholder-style="placeholderStyle"
                />
            </view>
            
            <view class="form-item">
                <text class="label">确认密码</text>
                <input 
                    type="password"
                    v-model="form.confirmPassword"
                    placeholder="请再次输入新密码"
                    :placeholder-style="placeholderStyle"
                />
            </view>
            
            <button class="submit-btn" @tap="handleSubmit">重置密码</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                phone: '',
                verifyCode: '',
                password: '',
                confirmPassword: ''
            },
            counting: false,
            counter: 60,
            placeholderStyle: 'color: #bbb; font-size: 28rpx;'
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        
        getVerifyCode() {
			console.log("tap verify code...")
            if (this.counting) return
            
            if (!this.form.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return
            }
            
            if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
                uni.showToast({
                    title: '手机号格式不正确',
                    icon: 'none'
                })
                return
            }
            
            this.counting = true
            this.counter = 60
            const timer = setInterval(() => {
                this.counter--
                if (this.counter <= 0) {
                    clearInterval(timer)
                    this.counting = false
                }
            }, 1000)
            
            uni.showToast({
                title: '验证码已发送',
                icon: 'success'
            })
        },
        
        handleSubmit() {
            if (!this.form.phone || !this.form.verifyCode || 
                !this.form.password || !this.form.confirmPassword) {
                uni.showToast({
                    title: '请填写完整信息',
                    icon: 'none'
                })
                return
            }
            
            if (this.form.password !== this.form.confirmPassword) {
                uni.showToast({
                    title: '两次密码不一致',
                    icon: 'none'
                })
                return
            }
            
            uni.showToast({
                title: '密码重置成功',
                icon: 'success',
                duration: 2000,
                success: () => {
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 2000)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.forget-password {
    min-height: 100vh;
    background: #ffffff;
    padding: 40rpx;
}

.header {
    position: relative;
    text-align: center;
    margin-bottom: 60rpx;
    
    .back {
        position: absolute;
        left: 0;
        font-size: 28rpx;
        color: #333;
    }
    
    .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
    }
}

.form {
    .form-item {
        margin-bottom: 40rpx;
        
        .label {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 16rpx;
            display: block;
        }
        
        input {
            height: 90rpx;
            background: #f8f9fa;
            border-radius: 16rpx;
            padding: 0 30rpx;
            font-size: 30rpx;
            color: #333;
        }
        
        &.verify {
            position: relative;
            
            .verify-btn {
                position: absolute;
                right: 30rpx;
                top: 50%;
                transform: translateY(-10%);
                font-size: 26rpx;
                color: #333;
                background: #fff;
                padding: 10rpx 30rpx;
                border-radius: 30rpx;
                border: 1px solid #eee;
                
                &.disabled {
                    color: #999;
                    background: #f5f5f5;
                }
            }
        }
    }
}

.submit-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #333;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 16rpx;
    margin-top: 40rpx;
    
    &:active {
        opacity: 0.9;
    }
}

.input-placeholder {
    color: #bbb;
    font-size: 28rpx;
}
</style> 